<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>红绿灯倒计时</title>
    <style>
        .box{width:250px;height:52px;padding:20px 40px;border:2px solid #ccc;border-radius:16px;margin:0 auto;}
        .box .count{width:60px;color:#666;font-size:200%;line-height:50px;padding-left:6px;margin-left:5px;border:1px solid #fff}
        .box div{margin-left:5px;float:left;width:50px;height:50px;border-radius:50px;border:1px solid #666;}
        .gray{background-color:#eee;}
        .red{background-color:red;}
        .yellow{background-color:yellow;}
        .green{background-color:#26ff00;}
      </style>
</head>
<body>
    <div class="box">
        <div id="red"></div>
        <div id="yellow"></div>
        <div id="green"></div>
        <div class="count" id="count"></div>
      </div>
      <script>
        var lamp = {
          red: {
            obj: document.getElementById('red'),
            timeout: 30,
            style: ['red', 'gray', 'gray'],
            next: 'green'
          },
          yellow: {
            obj: document.getElementById('yellow'),
            timeout: 5,
            style: ['gray', 'yellow', 'gray'],
            next: 'red'
          },
          green: {
            obj: document.getElementById('green'),
            timeout: 35,
            style: ['gray', 'gray', 'green'],
            next: 'yellow'
          },
          changeStyle(style) {
            this.red.obj.className = style[0];
            this.yellow.obj.className = style[1];
            this.green.obj.className = style[2];
          }
        };
        var count = {
          obj: document.getElementById('count'),
          change: function(num) {
            this.obj.innerHTML = (num < 10) ? ('0' + num) : num;
          }
        };
        var now = lamp.green;
        var timeout = now.timeout;
        lamp.changeStyle(now.style);
        count.change(timeout);
        setInterval(function() {
          if (--timeout <= 0) {
            now = lamp[now.next];
            timeout = now.timeout;
            lamp.changeStyle(now.style);
          }
          count.change(timeout);
        }, 1000);
      </script>
       <p><a href="第六章.html">返回上一级</a></p>
</body>
</html>